<template>
  <div
    class="settings flex h-[572px] max-h-[calc(100vh-88px)] w-[720px] overflow-hidden rounded-[12px]"
  >
    <div
      id="settings-bar"
      class="flex h-full w-[220px] flex-col flex-shrink-0 border-r-[1px] bg-[#e5e5eaf2] bg-opacity-95 setting-bar pointer-events-auto relative z-[-1] float-left"
    >
      <div
        id="settings-user"
        class="h-[92px] flex-shrink-0 cursor-pointer border-b-[1px] bg-clip-content duration-300"
      >
        <div class="py-[14px] pl-[16px]">
          <div
            class="flex h-full w-[calc(100%-16px)] items-center rounded-[6px] p-[12px]"
            :class="activeTab === 'userInfo' ? 'bg-white' : ''"
            @click="activeTab = 'userInfo'"
          >
            <div
              class="h-[40px] w-[40px] flex-shrink-0 overflow-hidden rounded-full"
            >
              <img :src="avatar" />
            </div>
            <div
              class="flex flex-1 flex-col items-start overflow-hidden pl-[16px] pr-[10px]"
            >
              <span
                class="w-full truncate font-ali-65 text-[13px] leading-[18px] text-[#4A7AFF] !text-color-t1"
                >{{ userInfo.account }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div
        id="settings-menu"
        class="relative max-h-[calc(100%-92px)] flex-1 pl-[16px] pt-[32px] pb-[40px]"
      >
        <div class="h-full pr-[16px]">
          <button
            type="button"
            class="s-button h-[36px] w-full rounded-[6px] py-[8px] pl-[12px] text-left text-[14px] duration-150 hover:bg-white hover:bg-opacity-90 hover:text-[#1c1c1e]"
            v-for="(item, index) in tabs"
            :key="item.id"
            :class="activeTab === item.id ? 'text-[#1c1c1e] bg-white/90' : ''"
            @click="activeTab = item.id"
          >
            {{ item.name }}
          </button>
        </div>
      </div>
    </div>
    <div></div>
    <div class="h-full w-full bg-color-deepest">
      <div class="h-full">
        <div v-show="activeTab === 'userInfo'" class="px-[70px] py-[40px]">
          <UserInfo></UserInfo>
        </div>
        <div v-show="activeTab === 'basic'" class="px-[70px] py-[40px]">
          <SettingBasic @updateBasic="updateBasic"></SettingBasic>
        </div>
        <div v-show="activeTab === 'wall'" class="h-full">
          <Wall :data="wallList" @changeWallpaper="changeWallpaper"></Wall>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElSelect, ElOption } from "element-plus";
import { vOnClickOutside } from "@vueuse/components";
import { useUserInfoStore, useSettingStore } from "../store";
import { ref, computed } from "vue";
import type { UserInfo as UserInfoType } from "../api/setting";
import UserInfo from "./UserInfo.vue";
import SettingBasic from "../elements/SettingBasic.vue";
import Wall from "../elements/Wall.vue";
import resourceApi from "../api/resource";
import settingApi from "../api/setting";

const activeTab = ref("basic");
const tabs = [
  {
    id: "basic",
    name: "基本",
  },
  {
    id: "wall",
    name: "壁纸",
  },
];

const wallList = ref([]);

function getResourceByTab(type) {
  return new Promise((resolve) => {
    resourceApi.getPage({ type }).then((res) => {
      resolve(res);
    });
  });
}
getResourceByTab("wallpaper").then((res: any) => {
  wallList.value = res.records.map((item) => ({
    url: item.resourceMultimediaUrl,
    name: item.name,
  }));
});

const config = {
  leftBarDisplayStatus: "show",
  leftBarDisplaySide: "left",
};
const leftBarDisplayStatusOptions = [
  {
    label: "一直显示",
    value: "show",
  },
  {
    label: "自动隐藏",
    value: "auto",
  },
  {
    label: "一直隐藏",
    value: "hidden",
  },
];

const userInfoStore = useUserInfoStore();
const settingStore = useSettingStore();

const userInfo = ref<UserInfoType>(userInfoStore.userInfo);

const avatar = computed(() => {
  return settingStore.setting.avatar || userInfoStore.userInfo.avatar;
});

const updateBasic = (obj) => {
  settingApi.edit(obj).then(() => {
    settingStore.setSetting(obj);
  });
};

const changeWallpaper = (url: string) => {
  const app = document.querySelector("#app") as HTMLElement;
  if (app) {
    const obj = {
      backgroundPicture: url,
    };
    settingApi.edit(obj).then(() => {
      app.style.backgroundImage = `url(${url})`;
      app.style.backgroundSize = "cover";
      settingStore.setSetting(obj);
    });
  }
};
</script>

<style scoped lang="scss">
.s-button {
  &:not(:last-child) {
    margin-bottom: 4px;
  }
}
</style>
